<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table :data="
        tableData.listdata.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    " style="width: 100%">
        <el-table-column prop="id" label="编号"  />
      <el-table-column prop="title" label="楼盘名称"  />
      <el-table-column prop="type" label="房源类型" />
      <el-table-column prop="num" label="门牌号" />
      <el-table-column prop="hometype" label="房源户型" />
      <el-table-column prop="name" label="户主" />
        <!-- 添加输入框 -->
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="请输入查询内容" @blur="searchLink" />
            </template>
        </el-table-column>
        <!-- 添加输入框 -->
    </el-table>
    <!-- 设置导航 -->
    <!-- 修改下面得属性 -->
    <el-pagination 
    v-model:currentPage="currentPage4"
    v-model:page-size="pageSize4"
    layout="total, sizes, prev, pager, next, jumper" :total="tableData.listdata.length"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
</template>
<script lang="ts" setup>
import { ref , onMounted, reactive} from "vue"
import { useStore } from "vuex";
import link from "../../../api/link.js"
import apiUrl from "../../../api/url.js"
// 设置需要的参数与方法
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const search = ref('');
// 得到store对象
const store = useStore();

// 修改下面得方法
const handleSizeChange = (val: number) => {
    //一页显示多少条
    pageSize4.value = val;
}
const handleCurrentChange = (val: number) => {
    //页码更改方法
    currentPage4.value = val;
}

let tableData=reactive({
    listdata:[]
})


let searchLink=()=>{
     link(apiUrl.userlist,"get",{},{name:search.value}).then((ok:any)=>{
        console.log(ok)
        tableData.listdata=ok.data
    })
}

onMounted(()=>{
    link(apiUrl.userlist).then((ok:any)=>{
        console.log(ok)
        tableData.listdata=ok.data
    })
})

// const tableData = [
//     {
//         date: '2016-05-03',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-02',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-04',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
// ]
</script>